<template>
  <div class="big">
    <div class="loginbox">
      <el-form ref="form" :model="data">
        <h2>注册普通用户账号</h2>
        <el-form-item>
          <el-input v-model="data.telephone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="data.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="data.password" type="password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item style="margin-left:80px;">
          <el-button type="primary" @click="onSubmit" style="width:200px">注册</el-button>
        </el-form-item>
        <el-form-item>
          <el-link type="primary" style="float:left;" @click="backLogin">已有账号？</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ElForm, ElFormItem, ElInput, ElButton, ElLink } from 'element-plus';
const data = ref({});
const router = useRouter();
const form = ref({
  telephone: '',
  password: '',
  username: ''
});

const backLogin = () => {
  router.push('/');
};

const onSubmit = async () => {
  try {
    const result = await axios.post('/ky/user/register', form.value);
    if (result.data.code === 200) {
      ElMessage.success("注册成功！");
      await router.push('/');
    }
  } catch (error) {
    console.error('注册请求出错:', error);
    ElMessage.error('注册请求出错，请检查网络或重试！');
  }
};
</script>

<style scoped>
.loginbox {
  border: 1px solid #DCDFE6;
  background-color: rgb(236, 233, 233);
  width: 350px;
  margin: 180px auto;
  padding: 35px 35px 15px 35px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
</style>